<!-- 添加评论 -->
<template>
	<view class="commont-from-wrap">
		<!-- 评价商品 -->
		<view class="goods-card">
      <view class="content-item"><text class="content-label">预约门店:&nbsp;&nbsp;</text>
        {{ goodsDetail.shop_name }}</view>
      <view class="content-item"><text class="content-label">预约时间:&nbsp;&nbsp;</text>
        <text>{{ goodsDetail.serve_time_text }}</text></view>
      <view class="content-item"><text class="content-label">预约状态:&nbsp;&nbsp;</text>
        {{ goodsDetail.state_text }}</view>
		</view>

		<view class="form-item">
			<view class="area-box">
				<textarea class="inp-area" v-model="message" placeholder="说说你的使用心得~" placeholder-class="pl-style" />
			</view>
		</view>
		<view class="foot_box u-flex u-row-center u-col-center u-m-t-60"><button class="u-reset-button post-btn" @tap="subComment">提交</button></view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			imgList: [],
			star: 5,
			message: '',
			goodsDetail: {}
		};
	},
	computed: {
		starTip() {
			let text = '';
			if (this.star <= 1) {
				text = '差评';
			}
			if (this.star > 1 && this.star <= 3) {
				text = '中评';
			}
			if (this.star >= 4) {
				text = '好评';
			}
			return text;
		}
	},
	onLoad() {
		this.getOrderItemDetail();
	},
	methods: {
		// 订单详情
		getOrderItemDetail() {
			let that = this;
			that.$https('sendgoods.serveDetail', {
        token:uni.getStorageSync('token')||'',
				id: that.$Route.query.serve_list_id,
				order_item_id: that.$Route.query.serve_id
			}).then(res => {
				if (res.code === 1) {
					that.goodsDetail = res.data;
				}
			});
		},

		subComment() {
			let that = this;
			that.$https('sendgoods.usercommet', {
        token:uni.getStorageSync('token')||'',
				id: that.$Route.query.serve_list_id,
        commet: that.message,
			}, '提交中...').then(res => {
				if (res.code === 1) {
					that.$u.toast('评论发表成功');
					that.$Router.back();
				}
			});
		}
	}
};
</script>

<style lang="scss">
pages{
  background: #fff;
}
// 服务商品
.goods-card {
	margin: 10rpx 0;
	padding: 20rpx;
	background: #fff;
	.content-item {
    padding:0 20rpx;
		font-size: 30rpx;

		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		width: 450rpx;
		margin-bottom: 20rpx;
		.content-label {
			margin-right: 10rpx;
		}
	}
}
.form-item{
  background: #fff;
  padding: 20rpx 0;
}
.area-box {
	width: 690rpx;
	min-height: 306rpx;
	background: rgba(249, 250, 251, 1);
	border-radius: 20rpx;
	padding: 28rpx;
	margin: auto;
	.pl-style {
		font-size: 26rpx;

		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 42rpx;
	}
	.inp-area {
		font-size: 26rpx;

		font-weight: 500;
		color: #333;
		line-height: 50rpx;
		width: 100%;
	}
	.img-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
}
.post-btn {
	width: 690rpx;
	line-height: 80rpx;
	background: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
	border-radius: 40rpx;
	color: rgba(#fff, 0.9);
	margin-bottom: 30rpx;
}
</style>
